<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>比较数字</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
  <style type="text/css">
  	.compare{
  		margin: 0;
  		width: 500px;
  	}
  	ul{
  		padding: 0;
  	}
  	ul li{
  		list-style: none;
  		margin-top: 0px;
  		
  	}
  	.result{
  		font-size: 30px;
  	}
  	
  </style>
</head>
<body>
				<div id="app">
					<div class="compare">
						<ul>
							<li>数据1：<input type="text" v-model="num1"></li>
							<li>数据2：<input type="text" v-model="num2"></li>
							<li><input type="button" value="比较" @click="compare()" /></li>
						</ul>
						<div class="result">
					{{result}}
						</div>
					</div>
				</div>
				<script type="text/javascript">
					var vm=new Vue({
						el:'#app',
						data{
							num1:'',
							num2:'',
							result:''
						},
						methods:{
							compare(){
								if(!this.num1 || !this.num2){
									this.result='输入的数字不能为空'
								}else{
									this.result=parseInt(this.num1)==parseInt(this.num2)?'两个数相等':parseInt(this.num1)>parseInt(this.num2)?'数据1大于数据2':'数据2大于数据1'
								}
							}
						}
					})
				</script>
</body>
</html>
